<script setup lang="ts">
import { onMounted, ref, reactive, watch } from "vue";
import { DynamicTable } from "@/components/DynamicTable";
import { PaginationConfig, TableColumn } from "@/components/DynamicTable/types";
import DynamicForm from "@/components/DynamicForm/index.vue";
import type { DynamicFormInstance } from "@/components/DynamicForm/types";
import { FormItemConfig } from "@/components/DynamicForm/types";
import { ElMessage } from "element-plus";
import { getDNSRecords } from "../servers";

interface Props {
  configName?: string;
}

const props = withDefaults(defineProps<Props>(), {
  configName: "default",
});

const pagination = reactive<PaginationConfig>({
  currentPage: 1,
  pageSize: 20,
  total: 0,
  pageSizes: [10, 20, 50, 100],
  layout: "total, sizes, prev, pager, next",
  background: true,
});

const dnsRecords = ref<any[]>([]);
const loading = ref(false);
const searchFormRef = ref<DynamicFormInstance>();

// 搜索表单
const searchForm = reactive({
  filter: "",
});

const searchConfig: FormItemConfig[] = [
  {
    key: "filter",
    name: "子域名",
    type: "input",
    placeholder: "搜索子域名",
    params: {
      clearable: true,
      style: { width: "200px" },
    },
  },
];

const columns = ref<TableColumn[]>([
  {
    label: "ID",
    prop: "id",
    show: true,
  },
  {
    label: "域名",
    prop: "name",
    show: true,
  },
  {
    label: "远程地址",
    prop: "remote_addr",
    show: true,
  },
  {
    label: "类型",
    prop: "type",
    show: true,
  },
  {
    label: "时间",
    prop: "time",
    width: 180,
    show: true,
  },
]);

// 获取 DNS 记录列表
const fetchDNSRecords = async () => {
  if (!props.configName) return;

  loading.value = true;
  try {
    const params: any = {
      config_name: props.configName,
      page: pagination.currentPage,
      page_size: pagination.pageSize,
    };

    if (searchForm.filter) {
      params.filter = searchForm.filter;
    }

    const { data } = await getDNSRecords(params);

    dnsRecords.value = data.records || [];
    pagination.total = data.total || 0;
  } catch (error: any) {
    console.error("获取 DNS 记录失败:", error);
    ElMessage.error(error.message || "获取 DNS 记录失败");
  } finally {
    loading.value = false;
  }
};

const handleSearch = (value: any) => {
  searchForm.filter = value.filter || "";
  pagination.currentPage = 1;
  fetchDNSRecords();
};

const handleSearchReset = () => {
  searchFormRef.value?.resetFields();
  searchForm.filter = "";
  pagination.currentPage = 1;
  fetchDNSRecords();
};

const handlePageChange = (page: number) => {
  pagination.currentPage = page;
  fetchDNSRecords();
};

const handleSizeChange = (size: number) => {
  pagination.pageSize = size;
  pagination.currentPage = 1;
  fetchDNSRecords();
};

// 监听配置变化
watch(
  () => props.configName,
  () => {
    pagination.currentPage = 1;
    fetchDNSRecords();
  }
);

onMounted(() => {
  if (props.configName) {
    fetchDNSRecords();
  }
});
</script>

<template>
  <div>
    <el-card shadow="never">
      <div class="search-form-container">
        <DynamicForm
          ref="searchFormRef"
          v-model="searchForm"
          :form-config="searchConfig"
          :gutter="16"
          label-width="100px"
          type="search"
          @search="handleSearch"
          @reset="handleSearchReset"
        />
      </div>
    </el-card>

    <div style="height: 10px"></div>

    <el-card>
      <DynamicTable
        :pagination="pagination"
        :columns="columns"
        :data="dnsRecords"
        :loading="loading"
        @current-page-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.search-form-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>
